import React from 'react'
import Logo from '../../components/logo/logo'

import {List, InputItem, WhiteSpace, WingBlank, Button} from 'antd-mobile'

import {login} from '../../redux/user.redux'
import { connect } from 'react-redux'
import {Redirect} from 'react-router-dom'
import ImoocForm from '../../components/imooc-form/imooc-form'

@connect(
    state => state.user,
    {login}
)
@ImoocForm
class Login extends React.Component{
    constructor(props){
        super(props);

        this.register = this.register.bind(this)
        this.handleLogin = this.handleLogin.bind(this)
    }
    // handleChange(key,val){
    //     this.setState({
    //         [key]:val
    //     })
    // }
    handleLogin(){
        this.props.login(this.props.state)
    }
    register(){
        this.props.history.push('/register')
    }
    render(){
        return (
            <div>
                {(this.props.redirectTo && this.props.redirectTo!=='/login') ? <Redirect to={this.props.redirectTo} /> : null}
                <Logo></Logo>
                <h2>登录页面</h2>
                <WingBlank>
                    <List>
                        {this.props.msg ? <p className="error-msg">{this.props.msg}</p> : null}
                        <InputItem 
                            onChange={v=>this.props.handleChange('user',v)}
                        >用户</InputItem>   
                        <InputItem
                            onChange={v=>this.props.handleChange('pwd',v)}
                            type="password"
                        >密码</InputItem> 
                    </List>
                    <WhiteSpace/>
                    <Button type="primary" onClick={this.handleLogin}>登录</Button>
                    <WhiteSpace/>
                    <Button onClick={this.register} type="primary">注册</Button>  
                </WingBlank>
            </div>
        )
    }
}

export default Login